<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       * {
           margin: 0px;
           padding: 0px;
       }
       table, tbody {
           width: 100%;
           margin: 5%;
       }
       .red {
           color: red;
       }
    </style>
</head>
<body>
    <form action="">
        <select name="symbol">
        <?php foreach ($abnormal_symbol_enum as $enum) { ?>
        <option value="<?=$enum['symbol']?>" <?=($symbol === $enum['symbol'])?'selected':'' ?>><?=$enum['key']?></option>
        <?php } ?>
        </select>
        <select name="start" style="width: 90px;">
        <?php foreach ($start_time_infos as $k => $start_time) { ?>
        <option value="<?=$k ?>" <?=($k === $start)?'selected':''?>><?=$start_time ?></option>
        <?php } ?>
        </select>
        <input type="submit" value="获取k线">
    </form>
    <div id="kline" style="width: 100%; height: 300px;"></div>
<table>
    <?php foreach ($abnormal_data as $abnormal_value) { $timestamp = strtotime($abnormal_value['at']); ?>
        <tr>
            <td colspan=2>[<?=$abnormal_value['volume_at_short'] ?>]
            <?php if ($abnormal_value['volume_at'] < datetime('-30 minutes')) { echo "庄家可能在";
                foreach (CRAWLER_BANKER_ACTION_MAPS as $k => $v) {
                    $radio_key = $abnormal_value['id'].'_'.$k; ?>
                    <input type="radio" action="<?=$k ?>" abnormal-id="<?=$abnormal_value['id']?>" name="<?=$abnormal_value['id']?>" id="<?=$radio_key?>" <?=($abnormal_value['banker_action'] === $k)?'checked':''?>>
                    <label for="<?=$radio_key?>"><?=$v?></label>
                <?php }} ?>
            </td>
        </tr>
    <?php } ?>
</table>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<script>

var kline = echarts.init(document.getElementById('kline'));
var upColor = '#00da3c';
var upBorderColor = '#008F28';
var downColor = '#ec0000';
var downBorderColor = '#8A0000';

// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
var data = splitData(<?=json($binance_infos)?>);

function splitData(rawData) {
    var categoryData = [];
    var values = []
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i])
    }
    return {
        categoryData: categoryData,
        values: values
    };
}

var kline_option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        data: data.categoryData,
        scale: true,
        boundaryGap : false,
        axisLine: {onZero: false},
        splitLine: {show: false},
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
    },
    yAxis: {
        scale: true,
        splitArea: {
            show: true
        }
    },
    dataZoom: [
        {
            type: 'inside',
            start: 50,
            end: 100
        },
        {
            show: true,
            type: 'slider',
            y: '90%',
            start: 50,
            end: 100
        }
    ],
    series: [
        {
            name: '日K',
            type: 'candlestick',
            data: data.values,
            itemStyle: {
                normal: {
                    color: upColor,
                    color0: downColor,
                    borderColor: upBorderColor,
                    borderColor0: downBorderColor
                }
            },
            markPoint: {
                label: {
                    normal: {
                    formatter: function (param) {
                            return param != null ? param.value : '';
                        }
                    }
                },
                data: [
                    {
                        name: 'highest value',
                        type: 'max',
                        valueDim: 'highest',
                        itemStyle: {
                            normal: {color: '#45E935'}
                        }
                    },
                    {
                        name: 'lowest value',
                        type: 'min',
                        valueDim: 'lowest',
                        itemStyle: {
                            normal: {color: '#F64838'}
                        }
                    },
                    {
                        name: 'average value on close',
                        type: 'average',
                        valueDim: 'close',
                        itemStyle: {
                            normal: {color: '#F6AB21'}
                        }
                    }
                ],
                tooltip: {
                    formatter: function (param) {
                        return param.name + '<br>' + (param.data.coord || '');
                    }
                }
            },
            markLine: {
                symbol: ['none', 'none'],
                data: [
                    [
                        {
                            name: 'from lowest to highest',
                            type: 'min',
                            valueDim: 'lowest',
                            symbol: 'circle',
                            symbolSize: 10,
                            label: {
                                normal: {show: false},
                                emphasis: {show: false}
                            }
                        },
                        {
                            type: 'max',
                            valueDim: 'highest',
                            symbol: 'circle',
                            symbolSize: 10,
                            label: {
                                normal: {show: false},
                                emphasis: {show: false}
                            }
                        }
                    ],
                    {
                        name: 'min line on close',
                        type: 'min',
                        valueDim: 'close'
                    },
                    {
                        name: 'max line on close',
                        type: 'max',
                        valueDim: 'close'
                    }
                ]
            }
        }

    ]
};

var abnormal_data = <?=json($abnormal_data)?>;

$(abnormal_data).each(function (k, v) {
    kline_option.series[0].markPoint.data.push({
        coord: [v.volume_at_short, v.price],
        value: v.price,
        itemStyle: {
            normal: {color: '#333233'}
        }
    });
});

kline.setOption(kline_option);

function get_cookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

$('input:radio').on('change', function () {
    $this = $(this);
    $.post('/ajax/mark_crawler', {
        action: $this.attr('action'),
        abnormal_id: $this.attr('abnormal-id'),
        account_token: get_cookie('account_token')
    });
});

$('select').select2();

</script>
</html>
